import React, { useRef } from 'react'
import { Popup, Button,Notify,Dialog  } from 'react-vant';
import { observer } from 'mobx-react-lite'
import { v4 as uuidv4 } from 'uuid';
import { setContent } from '../../utils/storage'
import { contentStore } from '../../store/content'
import './index.scss'


function Content() {
    //添加ref
    const contentRef = useRef()
    //将输入内容存入本地
    function addContent() {
        const content = contentRef.current.value;
        if (content === '') {
            Dialog.alert({message:'请输入内容'})
        } else {
            const key = uuidv4();
            let obj = {id:key,day:Date.parse(new Date()),content:content}
            //将要存储的数据转为json
            obj = JSON.stringify(obj)
            setContent(key,obj)
            Notify.show({type:'success',message:'添加成功'})
            contentRef.current.value = ''
            contentStore.closeContent()
            contentStore.changeCount()
        }
    }
    return (
        <>
            <Popup
                visible={contentStore.visible}
                onClose={contentStore.closeContent}
            >
                <div style={{ padding: '80px 45px' }}>
                    <div className='input-box'>
                        <input type="text" placeholder='请输入内容' ref={contentRef} />
                    </div>
                    <div className='btn-box'>
                        <Button type="info" onClick={addContent}>添加</Button>
                    </div>
                </div>
            </Popup>
        </>
    )
}
export default observer(Content)